<template>
  <div class="usersCase" v-for="item in caseList" :key="item.id">
    <img src="https://m.moguvet.com/_nuxt/img/5786c21.png" alt="" />
    <div class="userCasecontent">
      <p><PhoneNumber :number="item.user_info.nickname" /></p>
      <p>
        <span>{{ item.content }}</span>
      </p>
      <p><Time :time="item.created_at" /></p>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { getCases } from "../../API";
import { useCount } from "../../store/index";
import Time from "../Time.vue";
import PhoneNumber from "../PhoneNumber.vue";
let store = useCount();
let user_id = ref("");
user_id.value = store.params.user_id;
let page = ref();
page.value = store.params.page;
let limit = ref("");
limit.value = store.params.limit;
//问诊病例接口请求
let caseList = ref([]);
let getCaseList = async () => {
  let { data } = await getCases({
    doctor_user_id: store.params.user_id,
    page: page.value,
    limit: limit.value,
  });
  caseList.value.push(...data.data.list);
  // console.log(data.data.list);
};
getCaseList();
</script>
<style scoped>
.usersCase {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  padding: 60px 0;
}
.usersCase img {
  width: 50px;
  height: 50px;
  margin-right: 30px;
}
.userCasecontent {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 32px;
}
.userCasecontent p:nth-of-type(1) {
  display: flex;
  justify-content: space-between;
}
.userCasecontent p:nth-of-type(2) {
  width: 100%;
  padding: 30px 40px;
  margin: 25px 0;
  background-color: #fafafa;
  box-sizing: border-box;
  font-size: 28px;
  color: #8e8e8e;
  border-radius: 20px;
}
.userCasecontent p:nth-of-type(2) span {
  overflow: hidden; /* 隐藏超出高度的内容 */
  display: -webkit-box; /* 将段落视为弹性伸缩盒子 */
  -webkit-line-clamp: 3; /* 设置最大显示行数为2行 */
  -webkit-box-orient: vertical; /* 设置伸缩盒子的排列方向为垂直 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.userCasecontent p:nth-of-type(3) {
  color: #d3d3d3;
  font-size: 24px;
}
</style>